<template>
  <div>
    <div class="mcb1">
      <el-card class="mcb3">
        <div v-for="(o, index) in tableData.length" :key="o" class="text item">
          <div class="mcb4">
            <div
              class="mcb5"
              @click="movieInfo(index)"
            >
              <el-image class="mcb6" :src="vals2[index]"> </el-image>
            </div>
            <div class="mcb7">
              <span class="mcb8" @click="movieInfo(index)">{{
                name[index]
              }}</span>
              <span class="mcb9"
                >{{ star[index] }}分</span
              >
            </div>
            <div class="mcb10">
              <span class="mcb11">{{ lab[index] }}</span>
            </div>
            <div class="mcb12">
              <el-tag type="warning" class="mcb13">{{
                lan[index]
              }}</el-tag>
              <el-tag type="warning" class="mcb14">{{
                mtype[index]
              }}</el-tag>
              <el-tag type="warning" class="mcb13"
                >{{ mtime[index] }}分钟</el-tag
              >
            </div>
            <div class="mcb15">
              <span class="mcb16"
                >导演：{{ dir[index] }}</span
              >
            </div>
            <div class="mcb15">
              <span class="mcb16"
                >主演：{{ mrole[index] }}</span
              >
            </div>
            <div class="mcb17">
              <el-button type="primary" class="mcb18" @click="buy(index)"
                >立即订票</el-button
              >
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <div class="mcb22" style="display: flex; float: left; width: 100%; background-color: white">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[4]"
        :page-size="4"
        layout="  pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, defineExpose } from 'vue'
import axios from 'axios'
import router from '@/router/index'
import '@/assets/scss/userCom/Phone/mc.scss'
const total = ref(2)
const tableData = ref([])
const tableAll = ref([])
const vals2 = ref([])
const name = ref([])
const star = ref([])
const lab = ref([])
const lan = ref([])
const dir = ref([])
const mrole = ref([])
const mtype = ref([])
const mtime = ref([])
const currentPage4 = ref(1)
const len = ref()
const reflash = (index, lens) => {
  for (let i = 0; i < lens.value; i = i + 1) {
    tableData.value.push(tableAll.value[i])
    const sp = require('@/assets/moviesPic/' + tableAll.value[i + index].pic)
    vals2.value.push(sp)
    name.value.push(tableAll.value[i + index].mname)
    star.value.push(tableAll.value[i + index].rate)
    lab.value.push(tableAll.value[i + index].nickname)
    lan.value.push(tableAll.value[i + index].mlanguage)
    dir.value.push(tableAll.value[i + index].director)
    mrole.value.push(tableAll.value[i + index].mrole)
    mtype.value.push(tableAll.value[i + index].mtype)
    mtime.value.push(tableAll.value[i + index].duration)
  }
}
onMounted(() => {
  axios.get('/api/movie/getMovieByMstate/正在热映').then((res) => {
    if (res.data !== null) {
      tableAll.value = res.data
      total.value = tableAll.value.length
      len.value = tableAll.value.length > 4 ? 4 : tableAll.value.length
      reflash(0, len)
    }
  })
})
function movieInfo(index) {
  sessionStorage.setItem('movieInfo', JSON.stringify(name.value[index]))
  router.push('/movieInfo')
}
function buy(index) {
  sessionStorage.setItem('chooseMovie', JSON.stringify(name.value[index]))
  router.push('/Buy')
}
function handleCurrentChange(val) {
  tableData.value = []
  name.value = []
  star.value = []
  lab.value = []
  lan.value = []
  dir.value = []
  mrole.value = []
  mtype.value = []
  mtime.value = []
  vals2.value = []
  const index = (val - 1) * 4
  len.value = total.value - index > 4 ? 4 : total.value - index
  reflash(index, len)
  currentPage4.value = val
}
defineExpose({ tableData, tableAll, name, star, lab, lan, dir, mrole, mtype, mtime, vals2, total })
</script>
